<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>析码无界 - 登录系统</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <!-- jQuery文件 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', sans-serif;
            color: #333;
        }
        
        /* 登录容器 */
        .login-container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 420px;
            animation: fadeIn 0.6s ease-in-out;
        }
        
        /* 登录头部 */
        .login-header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        /* Logo样式 */
        .login-logo {
            margin-bottom: 20px;
            animation: fadeIn 0.8s ease-in-out;
        }
        .login-logo img {
            width: 320px;
            height: auto;
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }
        .login-header h2 {
            color: #4a5568;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .login-header::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            margin: 15px auto 0;
            border-radius: 3px;
        }
        
        /* 表单组 */
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4a5568;
            font-size: 14px;
        }
        
        /* 输入框样式 */
        .form-control {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
            background-color: #f8fafc;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
            outline: none;
            background-color: #fff;
        }
        
        /* 输入框图标 */
        .form-group .input-icon {
            position: absolute;
            left: 15px;
            top: 40px;
            color: #a0aec0;
            font-size: 16px;
            transition: color 0.3s ease;
            z-index: 1;
        }
        .form-group input:focus + .input-icon,
        .form-group select:focus + .input-icon {
            color: #667eea;
        }
        
        /* 下拉选择框 */
        select.form-control {
            cursor: pointer;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 4 5%22%3E%3Cpath fill=%22%23343a40%22 d=%22M2 0L0 2h4zm0 5L0 3h4z%22/%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 8px 10px;
            padding-right: 35px; /* 增加右侧内边距，避免文字被下拉箭头遮挡 */
            text-overflow: ellipsis; /* 防止文本被截断 */
            overflow: visible; /* 确保内容可见 */
        }
        
        /* 记住密码 */
        .remember-me {
            margin-bottom: 25px;
            font-size: 14px;
        }
        .remember-me input[type="checkbox"] {
            margin-right: 8px;
            margin-top: 2px;
        }
        
        /* 登录按钮 */
        .btn-login {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            color: white;
            padding: 12px 0;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
        }
        .btn-login:active {
            transform: translateY(0);
        }
        .btn-login::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;
        }
        .btn-login:focus::after {
            animation: ripple 0.5s ease-out;
        }
        
        /* 页脚版权信息 */
        .login-footer {
            text-align: center;
            margin-top: 25px;
            font-size: 13px;
            color: #718096;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-container {
                padding: 30px 25px;
                margin: 20px;
            }
            
            .login-header h2 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <!-- 析码无界Logo -->
            <div class="login-logo">
                <img th:src="@{/img/Logo.svg}" alt="析码无界" style="width: 360px; height: auto; max-width: 100%; display: block; margin: 0 auto;">
            </div>
            <h2><i class="fa fa-lock" aria-hidden="true"></i> 欢迎登录析码无界</h2>
        </div>
        
        <form th:action="@{/login}" method="post" id="loginForm">
            <!-- 用户名输入 -->
            <div class="form-group">
                <label for="username">用户名</label>
                <input name="username" type="text" class="form-control" id="username" placeholder="学生请输入学号或姓名，教师请输入用户名" required>
                <small class="text-muted" style="display: block; margin-top: 5px;">
                    <i class="fa fa-info-circle"></i> 学生用户可使用学号（如：2405930409）或姓名（如：朱俊豪）登录，密码统一为123456
                </small>
                <span class="input-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
            </div>
            
            <!-- 密码输入 -->
            <div class="form-group">
                <label for="password">密码</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <span class="input-icon"><i class="fa fa-key" aria-hidden="true"></i></span>
            </div>
            
            <!-- 身份选择 -->
            <div class="form-group">
                <label for="identity">身份</label>
                <select name="role" class="form-control" id="identity" required>
                    <option value="" disabled selected>请选择身份</option>
                    <option value="admin">管理员</option>
                    <option value="teacher">教师</option>
                    <option value="student">学生</option>
                </select>
                <span class="input-icon"><i class="fa fa-id-card" aria-hidden="true"></i></span>
            </div>
            
            <!-- 记住密码 -->
            <div class="remember-me">
                <label class="checkbox-inline">
                    <input type="checkbox" id="rememberMe"> 记住我
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="color: red;" th:text="${logints}"></span>
                </label>
            </div>
            
            <!-- 登录按钮 -->
            <input type="submit" class="btn btn-login"></input>
            
            <!-- 页脚信息 -->
            <div class="login-footer">
                &copy; 2025 @析码无界系统管理平台 版权所有
            </div>
        </form>
    </div>

    <script>
        function validateForm() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const identity = document.getElementById('identity').value;
            
            // 输入验证
            if (!username.trim()) {
                showNotification('请输入用户名', 'error');
                return false;
            }
            
            if (!password) {
                showNotification('请输入密码', 'error');
                return false;
            }
            
            if (!identity) {
                showNotification('请选择身份', 'error');
                return false;
            }
            
            // 登录中状态
            const loginBtn = document.querySelector('.btn-login');
            const originalText = loginBtn.innerHTML;
            loginBtn.disabled = true;
            loginBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 登录中...';
            
            // 模拟登录请求
            setTimeout(() => {
                console.log('登录信息:', { 
                    username, 
                    password, 
                    identity,
                    rememberMe: document.getElementById('rememberMe').checked 
                });
                
                // 恢复按钮状态
                loginBtn.disabled = false;
                loginBtn.innerHTML = originalText;
                
                // 模拟登录成功提示
               // showNotification('登录成功，正在跳转...', 'success');
                
                // 这里是实际应用中提交表单的代码
                // return true;
            }, 1500);
            
            // 阻止表单提交，用于演示
            return false;
        }
        
        // 自定义提示框
        function showNotification(message, type) {
            // 创建提示框元素
            const notification = document.createElement('div');
            notification.className = 'notification alert alert-dismissible';
            notification.style.position = 'fixed';
            notification.style.top = '20px';
            notification.style.right = '20px';
            notification.style.zIndex = '9999';
            notification.style.padding = '15px 20px';
            notification.style.borderRadius = '6px';
            notification.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
            notification.style.fontSize = '14px';
            notification.style.transition = 'all 0.3s ease';
            notification.style.opacity = '0';
            notification.style.transform = 'translateX(100%)';
            
            // 设置不同类型的样式
            if (type === 'error') {
                notification.style.backgroundColor = '#f8d7da';
                notification.style.color = '#721c24';
                notification.style.border = '1px solid #f5c6cb';
                notification.innerHTML = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> ' + message;
            } else if (type === 'success') {
                notification.style.backgroundColor = '#d4edda';
                notification.style.color = '#155724';
                notification.style.border = '1px solid #c3e6cb';
                notification.innerHTML = '<i class="fa fa-check-circle" aria-hidden="true"></i> ' + message;
            }
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示动画
            setTimeout(() => {
                notification.style.opacity = '1';
                notification.style.transform = 'translateX(0)';
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
        
        // 输入框聚焦动画
        document.querySelectorAll('.form-control').forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('focused');
            });
            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('focused');
            });
        });
    </script>
</body>
</html>